<template>
  <div>
    <!-- 个人资质证书 -->
    <div class="box-container personal-certificate">
      <div class="box-header">
        <div class="text">
          {{ $t("content.profile.job.cert_title") }}
          <span class="span_1"
            >{{ $t("content.profile.job.cert_desc_1") }}（{{
              $t("content.profile.job.cert_desc_2")
            }}）</span
          >
          <span class="span_2">{{
            $t("content.profile.job.cert_desc_1")
          }}</span>
        </div>
        <div class="button" @click="uploadCertificate">
          {{ $t("btnText.upload_cert") }}
        </div>
      </div>
      <div class="box-content">
        <div class="preview-list" v-if="certificateList">
          <div
            class="preview-item"
            v-for="item in certificateList"
            :key="item.id"
          >
            <div class="icons">
              <svg
                class="delete-icon"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                @click="deleteCertificate(item.id)"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="12"
                  cy="12.0001"
                  r="12"
                  fill="black"
                  fill-opacity="0.6"
                />
                <circle
                  cx="12"
                  cy="12.0001"
                  r="11.5"
                  stroke="white"
                  stroke-opacity="0.6"
                />
                <path d="M7.33301 7.3335L16.6663 16.6668" stroke="white" />
                <path d="M16.667 7.3335L7.33366 16.6668" stroke="white" />
              </svg>
              <svg
                class="view-icon"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                @click="onClickPreviewItem(item)"
              >
                <circle
                  cx="12"
                  cy="12.0001"
                  r="12"
                  fill="black"
                  fill-opacity="0.6"
                />
                <circle
                  cx="12"
                  cy="12.0001"
                  r="11.5"
                  stroke="white"
                  stroke-opacity="0.6"
                />
                <circle cx="11.3333" cy="11.3335" r="5.33333" stroke="white" />
                <path d="M15.333 15.3335L17.9997 18.0002" stroke="white" />
              </svg>
            </div>
            <img :src="item.single_pic" alt="" />
          </div>
        </div>
        <template v-else>
          <div class="pc-skeleton">
            <div class="pc-skeleton-inner">
              <Skeleton
                width="180px"
                height="240px"
                radius="16px"
                v-for="i in 3"
                :key="i"
              ></Skeleton>
            </div>
          </div>
        </template>
        <div class="mobile-preview-list" v-if="certificateList">
          <UploadImg
            :fileList="mobileCertificateList"
            size="small"
            customUpload
            @removeFile="onMobileRemoveCertificate"
            @selectFile="onMobileUploadCertificate"
          ></UploadImg>
        </div>
        <template v-else>
          <div class="mobile-skeleton">
            <div class="mobile-skeleton-inner">
              <Skeleton
                width="614px"
                v-for="i in 2"
                :key="i"
                height="819px"
                radius="51px"
              ></Skeleton>
            </div>
          </div>
        </template>
        <div class="footer-tips">
          {{ $t("content.profile.job.cert_desc_2") }}
        </div>
      </div>
    </div>
    <!-- 求职意向 -->
    <div class="box-container job-intention">
      <div class="box-header">
        <div class="text">{{ $t("content.profile.job.position_title") }}</div>
        <div class="button" @click="FormModalUpdateIntentionShow">
          {{ $t("btnText.imed_change") }}
        </div>
      </div>
      <div class="box-content">
        <div class="box-inner-content" v-if="intentionData">
          <div class="grid-box">
            <div class="row">
              <div class="label">{{ $t("profile.salary") }}:</div>
              <div class="value" v-if="intentionData?.salary_expectation">
                {{ intentionData?.salary_expectation }}{{ $t("unit.money") }}
              </div>
            </div>
            <div class="row">
              <div class="label">
                {{ $t("form.updateIntention.form.item_7.label") }}:
              </div>
              <div class="value">{{ intentionData?.address }}</div>
            </div>
            <div class="row">
              <div class="label">{{ $t("profile.position") }}:</div>
              <div class="value">{{ intentionData?.position_name }}</div>
            </div>
            <div class="row">
              <div class="label">{{ $t("profile.birth") }}:</div>
              <div class="value">{{ intentionData?.birthday }}</div>
            </div>
            <div class="row">
              <div class="label">{{ $t("profile.tags") }}:</div>
              <div class="value">
                {{ intentionData?.personal_label }}
              </div>
            </div>
            <div class="row">
              <div class="label">{{ $t("profile.assess") }}:</div>
              <div class="value">
                {{ intentionData?.objective }}
              </div>
            </div>
            <div class="footer_mobile_btns">
              <div class="btn change" @click="FormModalUpdateIntentionShow">
                {{ $t("btnText.change") }}
              </div>
            </div>
          </div>
        </div>
        <template v-else>
          <div class="pc-skeleton">
            <div class="box-inner-content">
              <Skeleton :rows="4"></Skeleton>
            </div>
          </div>
          <div class="mobile-skeleton">
            <div class="box-inner-content">
              <Skeleton :rows="8" mobile></Skeleton>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 工作经验 -->
    <div class="box-container work-experience">
      <div class="box-header">
        <div class="text">{{ $t("content.profile.job.job_title") }}</div>
        <div class="button" @click="onClickAddWorkExperience">
          <svg
            viewBox="0 0 16 16"
            fill="#ffffff"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M2.66699 8.00012H13.3337" stroke="white" />
            <path d="M8 2.66681L8 13.3335" stroke="white" />
          </svg>
          {{ $t("btnText.add_job") }}
        </div>
        <div class="button_2" @click="onClickAddWorkExperience">
          {{ $t("btnText.add") }}
        </div>
      </div>
      <div v-if="workListData">
        <template v-for="(item, index) in workListData" :key="item.id">
          <div class="box-content">
            <div class="box-inner-content">
              <div class="row">
                <div class="header">
                  <span
                    >{{ item.start_year }}.{{ item.start_month }}
                    {{ $t("content.profile.job.range") }} {{ item.end_year }}.{{
                      item.end_month
                    }}</span
                  >
                  <div>
                    <span>{{ item.company_title }}</span>
                    <span v-if="item.position_name"
                      >｜{{ item.position_name }}</span
                    >
                    <span v-if="item.level">｜{{ item.level }}</span>
                  </div>
                  <div class="btns">
                    <span
                      class="btns-btn"
                      @click="FormModalUpdateWorkShow(item)"
                      >{{ $t("btnText.change") }}</span
                    >
                    <span class="btns-btn" @click="deleteWork(item.id)">{{
                      $t("btnText.delete")
                    }}</span>
                  </div>
                </div>
                <div class="text">
                  <span v-if="item.industry_name">{{
                    item.industry_name
                  }}</span>
                  <span v-if="item.industry_name && item.people">｜</span>
                  <span v-if="item.people">{{ item.people }}</span>
                  <span v-if="item.department_name"
                    >｜{{ item.department_name }}
                  </span>
                </div>
              </div>
              <div class="row">
                <div class="header">
                  <span>{{ $t("content.profile.job.job_desc") }}:</span>
                </div>
                <div class="text">
                  {{ item.job_description }}
                </div>
              </div>
              <div class="footer_mobile_btns">
                <div class="btn change" @click="FormModalUpdateWorkShow(item)">
                  {{ $t("btnText.change") }}
                </div>
                <div class="btn delete" @click="deleteWork(item.id)">
                  {{ $t("btnText.delete") }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="divider-line"
            v-if="workListData?.length != index + 1"
          ></div>
        </template>
      </div>
      <div v-else>
        <div class="pc-skeleton">
          <div class="box-content" v-for="i in 2" :key="i">
            <div class="box-inner-content">
              <Skeleton :rows="3"></Skeleton>
            </div>
          </div>
        </div>
        <div class="mobile-skeleton">
          <div class="box-content" v-for="i in 2" :key="i">
            <div class="box-inner-content">
              <Skeleton :rows="3" mobile></Skeleton>
              <div class="footer_mobile_btns">
                <Skeleton width="100%" height="164px" radius="31px"></Skeleton>
                <Skeleton width="100%" height="164px" radius="31px"></Skeleton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教育经历 -->
    <div class="box-container education-experience">
      <div class="box-header">
        <div class="text">{{ $t("content.profile.job.edu_title") }}</div>
        <div class="button" @click="onClickAddEduBtn">
          <svg
            viewBox="0 0 16 16"
            fill="#ffffff"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M2.66699 8.00012H13.3337" stroke="white" />
            <path d="M8 2.66681L8 13.3335" stroke="white" />
          </svg>
          {{ $t("btnText.add_edu") }}
        </div>
        <div class="button_2" @click="onClickAddEduBtn">
          {{ $t("btnText.add") }}
        </div>
      </div>
      <div v-if="eduListData">
        <tepmlate v-for="(item, index) in eduListData" :key="item.id">
          <div class="box-content">
            <div class="box-inner-content">
              <div class="row">
                <div class="header">
                  <span
                    >{{ item.start_year }}.{{ item.start_month }}
                    {{ $t("content.profile.job.range") }} {{ item.end_year }}.{{
                      item.end_month
                    }}</span
                  >
                  <div class="btns">
                    <span class="btns-btn" @click="updateEdu(item)">{{
                      $t("btnText.change")
                    }}</span>
                    <span class="btns-btn" @click="deleteEdu(item.id)">{{
                      $t("btnText.delete")
                    }}</span>
                  </div>
                </div>
                <div class="text">
                  {{ item.company_title
                  }}<span v-if="item.position_name"
                    >｜{{ item.position_name }}</span
                  >
                </div>
              </div>
              <div class="row">
                <div class="header">
                  <span>{{ $t("content.profile.job.edu_desc") }}:</span>
                </div>
                <div class="text">
                  {{ item.job_description }}
                </div>
              </div>
              <div class="footer_mobile_btns">
                <div class="btn change" @click="updateEdu(item)">
                  {{ $t("btnText.change") }}
                </div>
                <div class="btn delete" @click="deleteEdu(item.id)">
                  {{ $t("btnText.delete") }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="divider-line"
            v-if="eduListData?.length != index + 1"
          ></div>
        </tepmlate>
      </div>
      <div v-else>
        <div class="pc-skeleton">
          <div class="box-content" v-for="i in 2" :key="i">
            <div class="box-inner-content">
              <Skeleton :rows="3"></Skeleton>
            </div>
          </div>
        </div>
        <div class="mobile-skeleton">
          <div class="box-content" v-for="i in 2" :key="i">
            <div class="box-inner-content">
              <Skeleton :rows="3" mobile></Skeleton>
              <div class="footer_mobile_btns">
                <Skeleton width="100%" height="164px" radius="31px"></Skeleton>
                <Skeleton width="100%" height="164px" radius="31px"></Skeleton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 专业技能 -->
    <div class="box-container professional-skill">
      <div class="box-header">
        <div class="text">{{ $t("content.profile.job.skill_title") }}</div>
        <div class="button" @click="onClickAddSkillBtn">
          <svg
            viewBox="0 0 16 16"
            fill="#ffffff"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M2.66699 8.00012H13.3337" stroke="white" />
            <path d="M8 2.66681L8 13.3335" stroke="white" />
          </svg>
          {{ $t("btnText.add_skill") }}
        </div>
        <div class="button_2" @click="onClickAddSkillBtn">
          {{ $t("btnText.add") }}
        </div>
      </div>
      <div v-if="skillsListData">
        <tepmlate v-for="(item, index) in skillsListData" :key="item.id">
          <div class="box-content">
            <div class="box-inner-content">
              <div class="row">
                <div class="header">
                  <span
                    >{{ item.start_year }}.{{ item.start_month }}
                    {{ $t("content.profile.job.range") }} {{ item.end_year }}.{{
                      item.end_month
                    }}</span
                  >
                  <span>{{ item.title }}</span>
                  <div class="btns">
                    <span class="btns-btn" @click="updateSkill(item)">{{
                      $t("btnText.change")
                    }}</span>
                    <span class="btns-btn" @click="deleteSkill(item.id)">{{
                      $t("btnText.delete")
                    }}</span>
                  </div>
                </div>
                <div class="footer_mobile_btns">
                  <div class="btn change" @click="updateSkill(item)">
                    {{ $t("btnText.change") }}
                  </div>
                  <div class="btn delete" @click="deleteSkill(item.id)">
                    {{ $t("btnText.delete") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="divider-line"
            v-if="skillsListData?.length != index + 1"
          ></div>
        </tepmlate>
      </div>
      <div v-else>
        <div class="pc-skeleton">
          <div class="box-content" v-for="i in 2" :key="i">
            <div class="box-inner-content">
              <Skeleton width="25%" height="30px"></Skeleton>
              <Skeleton width="75px" height="33px" radius="8px"></Skeleton>
              <Skeleton width="75px" height="33px" radius="8px"></Skeleton>
            </div>
          </div>
        </div>
        <div class="mobile-skeleton">
          <div class="box-content" v-for="i in 2" :key="i">
            <div class="box-inner-content">
              <Skeleton :rows="2" mobile></Skeleton>
              <div class="footer_mobile_btns">
                <Skeleton width="100%" height="164px" radius="31px"></Skeleton>
                <Skeleton width="100%" height="164px" radius="31px"></Skeleton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 成就奖励 -->
    <div class="box-container professional-skill">
      <div class="box-header">
        <div class="text">{{ $t("content.profile.job.hornor_title") }}</div>
        <div class="button" @click="onClickAddHonorBtn">
          <svg
            viewBox="0 0 16 16"
            fill="#ffffff"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M2.66699 8.00012H13.3337" stroke="white" />
            <path d="M8 2.66681L8 13.3335" stroke="white" />
          </svg>
          {{ $t("btnText.add_hornor") }}
        </div>
        <div class="button_2" @click="onClickAddHonorBtn">
          {{ $t("btnText.add") }}
        </div>
      </div>
      <div v-if="honorListData">
        <tepmlate v-for="(item, index) in honorListData" :key="item.id">
          <div class="box-content">
            <div class="box-inner-content">
              <div class="row">
                <div class="header">
                  <span
                    >{{ item.start_year }}.{{ item.start_month }}
                    {{ $t("content.profile.job.range") }} {{ item.end_year }}.{{
                      item.end_month
                    }}</span
                  >
                  <span>{{ item.title }}</span>
                  <div class="btns">
                    <span class="btns-btn" @click="updateHonor(item)">{{
                      $t("btnText.change")
                    }}</span>
                    <span class="btns-btn" @click="deleteHonor(item.id)">{{
                      $t("btnText.delete")
                    }}</span>
                  </div>
                </div>
                <div class="footer_mobile_btns">
                  <div class="btn change" @click="updateHonor(item)">
                    {{ $t("btnText.change") }}
                  </div>
                  <div class="btn delete" @click="deleteHonor(item.id)">
                    {{ $t("btnText.delete") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="divider-line"
            v-if="honorListData?.length != index + 1"
          ></div
        ></tepmlate>
      </div>

      <div v-else>
        <div class="pc-skeleton">
          <div class="box-content" v-for="i in 2" :key="i">
            <div class="box-inner-content">
              <Skeleton width="25%" height="30px"></Skeleton>
              <Skeleton width="75px" height="33px" radius="8px"></Skeleton>
              <Skeleton width="75px" height="33px" radius="8px"></Skeleton>
            </div>
          </div>
        </div>
        <div class="mobile-skeleton">
          <div class="box-content" v-for="i in 2" :key="i">
            <div class="box-inner-content">
              <Skeleton :rows="2" mobile></Skeleton>
              <div class="footer_mobile_btns">
                <Skeleton width="100%" height="164px" radius="31px"></Skeleton>
                <Skeleton width="100%" height="164px" radius="31px"></Skeleton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-download">
      <div class="download-btn" @click="downloadPdf">
        <span>{{ $t("btnText.download_resume") }}</span>
        <svg viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0.2 0.790121L7.27 3.94012V4.82212L0.2 7.98612V6.93612L5.954 4.38812L0.2 1.82612V0.790121ZM8.67656 0.790121L15.7466 3.94012V4.82212L8.67656 7.98612V6.93612L14.4306 4.38812L8.67656 1.82612V0.790121Z"
            fill="#172026"
          />
        </svg>
      </div>
    </div>

    <!-- 预览图 -->
    <Preview
      ref="previewRef"
      :visible="previewVisible"
      :url="previewUrl"
    ></Preview>
    <!-- modal表单框 -->
    <FormModalUpdateIntention
      ref="FormModalUpdateIntentionRef"
      :data="UpdateIntentionData"
      @complete="FormModalUpdateIntentionComplete"
    ></FormModalUpdateIntention>
    <FormModalUpdateWork
      :isAdd="isAddWorkFormModal"
      ref="FormModalUpdateWorkRef"
      :data="updateWorkData"
      @complete="FormModalUpdateWorkComplete"
    ></FormModalUpdateWork>
    <FormModalAddEdu
      ref="FormModalAddEduRef"
      :isAdd="isAddEdu"
      @complete="FormModalAddEduComplete"
      :data="updateEduData"
    ></FormModalAddEdu>
    <FormModalAddSkill
      ref="FormModalAddSkillRef"
      :isAdd="isAddSkill"
      :data="updateSkillData"
      @complete="FormModalAddSkillComplete"
    ></FormModalAddSkill>
    <FormModalAddHonor
      :isAdd="isAddHonor"
      ref="FormModalAddHonorRef"
      :data="updateHonorData"
      @complete="FormModalAddHonorComplete"
    ></FormModalAddHonor>
  </div>
</template>

<script setup lang="ts">
import type {
  CertificateListItem,
  ExperienceListItem,
  IntentionItem,
} from "~/types/profile";
import {
  onBeforeMount,
  ref,
  nextTick,
  computed,
  getCurrentInstance,
  onMounted,
  onBeforeUnmount,
} from "vue";
import { message, Modal } from "ant-design-vue";
import {
  postCertificateList,
  postCertificateAdd,
  postCertificateDelete,
  postMemberIntention,
  postMemberIntentionEdit,
  postExperienceList,
  postExperienceCreate,
  postExperienceDelete,
  postExperienceUpdate,
  ExperienceUrl,
} from "~/api/profile";
import { postChangeLanguage, postUploadSingleImg } from "~/api/api";
import { useMemberStore } from "~/store";
import { postDownloadPdf } from "~/api/member";

const confirmDeleteLoading = ref(false);

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

onMounted(() => {
  setNavList();
  let resume_index = sessionStorage.getItem("resume_index");
  if (resume_index) {
    activeNavIndex.value = parseInt(resume_index);
  }
});

const downloadPdf = async () => {
  goto("/pdf", { pdf: "resume" });
  return;
  let res = await postDownloadPdf(memberStore.profile?.id);
  if (res.code == 200) {
    const link = document.createElement("a");
    link.href = res.data;
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
};

//
const activeNavIndex = ref(0);
const mobileNavVisible = ref(false);
const navList = ref([
  {
    id: 1,
    title: "中文简历",
    lang: "cn",
  },
  {
    id: 2,
    title: "英文简历",
    lang: "en",
  },
]);

onBeforeUnmount(() => {
  sessionStorage.removeItem("resume_index");
});

const showResumeButton = async (item: any, index: number) => {
  let res = await postChangeLanguage(item.lang);
  if (res.code == 200) {
    sessionStorage.setItem("resume_index", index + "");
    // sessionStorage.setItem("language", index + "");
    location.reload();
  }
};

const setNavList = () => {
  setTimeout(() => {
    navList.value[0].title = $t("content.profile.job.navList.label_1");
    navList.value[1].title = $t("content.profile.job.navList.label_2");
  });
};

// ==========================个人证书=====================================
const memberStore = useMemberStore();
const certificateList = ref<CertificateListItem[] | undefined>();
const previewVisible = ref(false);
const previewUrl = ref("");
const previewRef = ref();
// 获取证书列表
const getCertificateList = async () => {
  let res = await postCertificateList();
  if (res.code === 200) {
    certificateList.value = res.data;
  }
};

const mobileCertificateList = computed(() => {
  return certificateList.value!.map((item) => item.single_pic);
});
// 上传证书
const uploadCertificate = () => {
  let input = document.createElement("input");
  input.type = "file";
  input.accept = "image/*";
  input.click();
  input.onchange = async (e) => {
    let file = e.target!.files[0];
    let formData = new FormData();
    formData.append("file", file);
    let res = await postCertificateAdd(formData);
    if (res.code === 200) {
      message.success(res.msg);
      getCertificateList();
    } else {
      message.error(res.msg);
    }
  };
};

const onMobileUploadCertificate = async (file: File) => {
  let formData = new FormData();
  formData.append("file", file);
  let res = await postCertificateAdd(formData);
  if (res.code === 200) {
    message.success(res.msg);
    getCertificateList();
  } else {
    message.error(res.msg);
  }
};

// 删除证书
const deleteCertificate = async (id: number) => {
  let res = await postCertificateDelete(id);
  if (res.code === 200) {
    message.success(res.msg);
    getCertificateList();
  } else {
    message.error(res.msg);
  }
};

const onMobileRemoveCertificate = (index: number) => {
  let id = certificateList.value![index].id;
  deleteCertificate(id);
};

// 预览证书
const onClickPreviewItem = (item: CertificateListItem) => {
  previewUrl.value = item.single_pic;
  previewRef.value.open();
};

// ==========================个人意向=====================================
const intentionData = ref<IntentionItem | undefined>();

// 获取个人意向数据
const getIntentionData = async () => {
  let res = await postMemberIntention();
  if (res.code === 200) {
    intentionData.value = res.data;
    Object.assign(memberStore.profile, res.data);
  }
};

// 编辑求职意向
const UpdateIntentionData = ref<IntentionItem | undefined>();
const FormModalUpdateIntentionRef = ref();
const FormModalUpdateIntentionShow = () => {
  UpdateIntentionData.value = JSON.parse(JSON.stringify(intentionData.value));
  if (isMobile()) {
    sessionStorage.setItem("params", JSON.stringify(UpdateIntentionData.value));
    goto("/mobile/updateIntention");
    return;
  }
  nextTick(() => {
    FormModalUpdateIntentionRef.value.show();
  });
};

// 编辑个人意向->重新获取数据
const FormModalUpdateIntentionComplete = () => {
  getIntentionData();
};

// ==========================工作经验=====================================
const workListData = ref<ExperienceListItem[] | undefined>();
const getWorkExperienceData = async () => {
  let res = await postExperienceList(ExperienceUrl.workList);
  if (res.code === 200) {
    workListData.value = res.data;
  }
};

const isAddWorkFormModal = ref(false);
const FormModalUpdateWorkRef = ref();
const updateWorkData = ref();
const FormModalUpdateWorkShow = (item: ExperienceListItem) => {
  updateWorkData.value = JSON.parse(JSON.stringify(item));
  if (isMobile()) {
    sessionStorage.setItem("params", JSON.stringify(updateWorkData.value));
    goto("/mobile/updateWork");
    return;
  }
  isAddWorkFormModal.value = false;
  nextTick(() => {
    FormModalUpdateWorkRef.value.show();
  });
};

// 弹窗事件完成回调
const FormModalUpdateWorkComplete = () => {
  getWorkExperienceData();
};

// 新增工作经验
const onClickAddWorkExperience = () => {
  if (isMobile()) {
    goto("/mobile/updateWork");
    return;
  }
  isAddWorkFormModal.value = true;
  nextTick(() => {
    FormModalUpdateWorkRef.value.show();
  });
};

const updateModalSubmiting = (modal) => {
  modal.update({
    okButtonProps: {
      loading: confirmDeleteLoading.value,
    },
  });
};
// 删除工作经验
const deleteWork = (id: number) => {
  let modal = Modal.confirm({
    title: $t("dialog.delete_data.title"),
    content: $t("dialog.delete_data.desc"),
    okText: $t("btnText.ensure"),
    cancelText: $t("btnText.cancel1"),
    maskClosable: true,
    async onOk() {
      confirmDeleteLoading.value = true;
      updateModalSubmiting(modal);
      let res = await postExperienceDelete(ExperienceUrl.workDelete, { id });
      if (res.code === 200) {
        message.success(res.msg);
        await getWorkExperienceData();
        confirmDeleteLoading.value = false;
        updateModalSubmiting(modal);
      } else {
        confirmDeleteLoading.value = false;
        message.error(res.msg);
        updateModalSubmiting(modal);
      }
    },
    onCancel() {
      confirmDeleteLoading.value = false;
      updateModalSubmiting(modal);
    },
  });
};

// ==========================教育经历=====================================
const eduListData = ref<ExperienceListItem[] | undefined>();
const getEduExperienceData = async () => {
  let res = await postExperienceList(ExperienceUrl.eduList);
  if (res.code === 200) {
    eduListData.value = res.data;
  }
};

const FormModalAddEduRef = ref();
const FormModalAddEduShow = () => {
  nextTick(() => {
    FormModalAddEduRef.value.show();
  });
};

const onClickAddEduBtn = () => {
  if (isMobile()) {
    goto("/mobile/updateEdu");
    return;
  }
  isAddEdu.value = true;
  updateEduData.value = null;
  FormModalAddEduShow();
};

// 新增教育经历重新获取数据
const FormModalAddEduComplete = () => {
  getEduExperienceData();
  updateEduData.value = null;
};

const updateEduData = ref();
const isAddEdu = ref(true);
const updateEdu = (item) => {
  isAddEdu.value = false;
  updateEduData.value = item;
  if (isMobile()) {
    sessionStorage.setItem("params", JSON.stringify(updateEduData.value));
    goto("/mobile/updateEdu");
    return;
  }
  FormModalAddEduShow();
};
// 删除教育经历
const deleteEdu = (id: number) => {
  let modal = Modal.confirm({
    title: $t("dialog.delete_data.title"),
    content: $t("dialog.delete_data.desc"),
    okText: $t("btnText.ensure"),
    cancelText: $t("btnText.cancel1"),
    maskClosable: true,
    async onOk() {
      confirmDeleteLoading.value = true;
      updateModalSubmiting(modal);
      let res = await postExperienceDelete(ExperienceUrl.eduDelete, { id });
      if (res.code === 200) {
        message.success(res.msg);
        await getEduExperienceData();
        confirmDeleteLoading.value = false;
        updateModalSubmiting(modal);
      } else {
        confirmDeleteLoading.value = false;
        updateModalSubmiting(modal);
        message.error(res.msg);
      }
    },
    onCancel() {
      confirmDeleteLoading.value = false;
      updateModalSubmiting(modal);
    },
  });
};

// ==========================专业技能=====================================
const skillsListData = ref<ExperienceListItem[] | undefined>();
const getSkillsExperienceData = async () => {
  let res = await postExperienceList(ExperienceUrl.skillList);
  if (res.code === 200) {
    skillsListData.value = res.data;
  }
};

const FormModalAddSkillRef = ref();
const FormModalAddSkillShow = () => {
  nextTick(() => {
    FormModalAddSkillRef.value.show();
  });
};
const isAddSkill = ref(true);
const updateSkillData = ref();
const onClickAddSkillBtn = () => {
  if (isMobile()) {
    goto("/mobile/updateSkill");
    return;
  }
  isAddSkill.value = true;
  updateSkillData.value = null;
  FormModalAddSkillShow();
};
const updateSkill = (item) => {
  isAddSkill.value = false;
  updateSkillData.value = item;
  if (isMobile()) {
    sessionStorage.setItem("params", JSON.stringify(updateSkillData.value));
    goto("/mobile/updateSkill");
    return;
  }
  FormModalAddSkillShow();
};

// 新增专业技能重新获取数据
const FormModalAddSkillComplete = () => {
  getSkillsExperienceData();
};

// 删除专业技能
const deleteSkill = (id: number) => {
  let modal = Modal.confirm({
    title: $t("dialog.delete_data.title"),
    content: $t("dialog.delete_data.desc"),
    okText: $t("btnText.ensure"),
    cancelText: $t("btnText.cancel1"),
    maskClosable: true,
    async onOk() {
      confirmDeleteLoading.value = true;
      updateModalSubmiting(modal);
      let res = await postExperienceDelete(ExperienceUrl.skillDelete, { id });
      if (res.code === 200) {
        message.success(res.msg);
        await getSkillsExperienceData();
        confirmDeleteLoading.value = false;
        updateModalSubmiting(modal);
      } else {
        confirmDeleteLoading.value = false;
        updateModalSubmiting(modal);
        message.error(res.msg);
      }
    },
    onCancel() {
      confirmDeleteLoading.value = false;
      updateModalSubmiting(modal);
    },
  });
};

// ==========================成就奖励=====================================
const honorListData = ref<ExperienceListItem[] | undefined>();
const getHonorExperienceData = async () => {
  let res = await postExperienceList(ExperienceUrl.honorList);
  if (res.code === 200) {
    honorListData.value = res.data;
  }
};

const isAddHonor = ref(true);
const updateHonorData = ref();
const onClickAddHonorBtn = () => {
  if (isMobile()) {
    goto("/mobile/updateHonor");
    return;
  }
  isAddHonor.value = true;
  updateEduData.value = null;
  FormModalAddHonorShow();
};

const updateHonor = (item) => {
  isAddHonor.value = false;
  updateHonorData.value = item;
  if (isMobile()) {
    sessionStorage.setItem("params", JSON.stringify(updateHonorData.value));
    goto("/mobile/updateHonor");
    return;
  }
  FormModalAddHonorShow();
};

const FormModalAddHonorRef = ref();
const FormModalAddHonorShow = () => {
  nextTick(() => {
    FormModalAddHonorRef.value.show();
  });
};

// 新增成就重新获取数据
const FormModalAddHonorComplete = () => {
  getHonorExperienceData();
};

// 删除成就
const deleteHonor = (id: number) => {
  let modal = Modal.confirm({
    title: $t("dialog.delete_data.title"),
    content: $t("dialog.delete_data.desc"),
    okText: $t("btnText.ensure"),
    cancelText: $t("btnText.cancel1"),
    maskClosable: true,
    async onOk() {
      confirmDeleteLoading.value = true;
      updateModalSubmiting(modal);
      let res = await postExperienceDelete(ExperienceUrl.honorDelete, { id });
      if (res.code === 200) {
        message.success(res.msg);
        await getHonorExperienceData();
        confirmDeleteLoading.value = false;
        updateModalSubmiting(modal);
      } else {
        confirmDeleteLoading.value = false;
        updateModalSubmiting(modal);
        message.error(res.msg);
      }
    },
    onCancel() {
      confirmDeleteLoading.value = false;
      updateModalSubmiting(modal);
    },
  });
};

onBeforeMount(() => {
  getCertificateList();
  getIntentionData();
  getWorkExperienceData();
  getEduExperienceData();
  getSkillsExperienceData();
  getHonorExperienceData();
});
</script>

<style scoped lang="less">
.user-panel {
  display: flex;
  gap: 24px;
  .user-logo {
    .user-name_mobile {
      display: none;
    }
  }
  .details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    color: #36434d;
    & > div {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .salary {
      font-size: 14px;
      color: #36434d;
    }
    .name {
      .value {
        font-size: 16px;
        color: #172026;
      }
    }
    .tags-list {
      display: flex;
      gap: 8px;
      font-size: 12px;
      & > div {
        padding: 4px 8px;
        border-radius: 6px;
        background: #f5f8fa;
        white-space: nowrap;
        display: flex;
      }
    }
    .label {
      width: 100px;
    }
    .seek {
      .status {
        padding: 4px 8px;
        background: rgba(54, 217, 108, 0.1);
        border-radius: 6px 6px 6px 6px;
        font-size: 12px;
        color: #36d96c;
        &.offline {
          background: #eef3f4;
          color: #70818c;
        }
      }
    }
  }
}
.box-container {
  margin-top: 24px;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid #ccd6de;
  overflow: hidden;
  margin-right: 120px;
  .box-header {
    background-color: #f5f8fa;
    text-align: center;
    padding: 17px 0;
    position: relative;
    .text {
      font-size: 16px;
      color: #172026;
      span {
        font-size: 12px;
        color: #70818c;
        &.span_2 {
          display: none;
        }
      }
    }
    .button {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 16px;
      color: #f5f8fa;
      width: 184px;
      height: 100%;
      gap: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #3d88f2;
      cursor: pointer;
      svg {
        width: 16px;
        height: 16px;
      }
    }
    .button_2 {
      display: none;
    }
  }
  .box-content {
    padding: 24px;
    box-sizing: border-box;
  }
  .footer-tips {
    display: none;
  }
}
.personal-certificate {
  .mobile-preview-list {
    display: none;
  }
  .pc-skeleton {
    .pc-skeleton-inner {
      display: flex;
      gap: 16px;
    }
  }
  .mobile-skeleton {
    .mobile-skeleton-inner {
      display: flex;
      gap: 82px;
    }
  }
}
.preview-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  svg {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .preview-item {
    position: relative;
    width: 135px;
    height: 180px;
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #ccd6de;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .icons {
    position: absolute;
    right: 6px;
    top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
}
.box-inner-content {
  padding: 0 48px;
}
.job-intention {
  font-size: 14px;
  color: #36434d;
  .grid-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
    .row {
      display: flex;
      gap: 48px;
      .label {
        white-space: nowrap;
      }
      .value {
        word-break: break-all;
      }
    }
    .row:nth-child(5) {
      grid-column: 1 / span 2;
    }
    .row:nth-child(6) {
      grid-column: 1 / span 2;
    }
  }
}
.job-intention {
  .footer_mobile_btns {
    display: none;
  }
}
.work-experience,
.education-experience,
.professional-skill {
  .divider-line {
    margin: 0;
  }
  .row {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    &:first-child {
      margin-bottom: 24px;
    }
    .header {
      display: flex;
      align-items: center;
      color: #36434d;
      gap: 16px;
      margin-bottom: 0;
      .btns {
        display: flex;
        gap: 8px;
        span {
          padding: 4px 16px;
          cursor: pointer;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #ccd6de;
          color: #36434d;
          &:nth-child(2) {
            color: #ff4060;
          }
        }
      }
    }
    .text {
      color: #70818c;
    }
  }
  .footer_mobile_btns {
    display: none;
  }
}
.professional-skill {
  .row {
    margin-bottom: 0 !important;
  }
  .pc-skeleton {
    .box-inner-content {
      display: flex;
      gap: 11px;
    }
  }
}
.footer-download {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  margin-right: 120px;
  .download-btn {
    display: flex;
    cursor: pointer;
    align-items: center;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #ccd6de;
    padding: 10px 16px;
    gap: 5px;
    font-size: 14px;
    color: #172026;
    svg {
      width: 16px;
      height: 8px;
    }
  }
}

@media screen and (max-width: 768px) {
  .user-panel {
    flex-direction: column;
    gap: 82px;
    .user-logo {
      display: flex;
      gap: 82px;
      img.logo {
        width: 246px;
        height: 246px;
      }
      .user-name_mobile {
        display: flex;
        flex-direction: column;
        gap: 20px;
        .label {
          display: none;
        }
        .value {
          font-size: 82px;
          color: #172026;
        }
      }
    }
    .details {
      font-size: 72px;
      gap: 61px;
      & > div {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
      }
      .salary {
        font-size: 72px;
      }
      .label {
        white-space: nowrap;
      }
      .name {
        display: none;
      }
      .tags-list {
        gap: 41px;
        flex-wrap: wrap;
        font-size: 61px;
        & > div {
          white-space: nowrap;
          padding: 20px 41px;
          border-radius: 31px;
        }
      }
      .seek {
        .status {
          padding: 20px 41px;
          border-radius: 31px;
          font-size: 61px;
        }
      }
    }
  }
  .box-container {
    margin-top: 123px;
    margin-right: 0;
    border-radius: 82px;
    .box-header {
      background-color: transparent;
      padding: 82px;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text {
        font-size: 82px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        span {
          font-size: 61px;
          &.span_2 {
            display: block;
          }
          &.span_1 {
            display: none;
          }
        }
      }
      .button {
        display: none;
      }
      .button_2 {
        display: block;
        font-size: 72px;
        color: #3d88f2;
        width: 266px;
        height: 164px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(61, 136, 242, 0.1);
        border-radius: 51px 51px 51px 51px;
      }
    }
    .box-content {
      padding: 82px;
      padding-top: 0;
    }
    .footer-tips {
      display: block;
      margin-top: 82px;
      font-size: 61px;
      color: #70818c;
    }
  }
  .personal-certificate {
    .mobile-preview-list {
      display: block;
    }
    .preview-list {
      display: none;
    }
  }
  .education-experience {
    .box-header {
    }
  }
  .job-intention {
    font-size: 72px;
    .grid-box {
      grid-template-columns: repeat(1, 1fr);
      row-gap: 82px;
      .row {
        flex-direction: column;
        gap: 41px;
        .value {
          color: #70818c;
        }
      }
      .row:nth-child(5) {
        grid-column: 1 / span 1;
      }
      .row:nth-child(6) {
        grid-column: 1 / span 1;
      }
    }
    .footer_mobile_btns {
      display: block;
      .btn {
        border-radius: 31px 31px 31px 31px;
        border: 3px solid #ccd6de;
        font-size: 61px;
        color: #36434d;
      }
    }
  }
  .work-experience {
    .row {
      .header {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  }
  .work-experience,
  .education-experience,
  .professional-skill {
    .row {
      gap: 41px;
      font-size: 72px;
      &:first-child {
        margin-bottom: 123px;
      }
      .header {
        flex-wrap: wrap;
        span {
          display: inline-block;
          width: 100%;
        }
        .btns {
          display: none;
        }
      }
    }
    .divider-line {
      margin-bottom: 82px;
    }
    .footer_mobile_btns {
      display: flex;
      gap: 41px;
      margin-top: 82px;
      .btn {
        flex: 1;
        border-radius: 31px;
        border: 1px solid #ccd6de;
        font-size: 61px;
        padding: 41px 0;
        &.delete {
          color: #ff4060;
        }
      }
    }
  }
  .box-inner-content {
    padding: 0;
  }
  .footer-download {
    display: none;
  }
}
</style>
